<template>
  <div>
    <el-container>
      <el-header class="jrc-header">
        <div class="menu">
          <div class="logo">
            <p>JRC</p>
          </div>

          <div>
            <system-menu></system-menu>
          </div>

          <div class="last">

            <div class="language">
              <el-dropdown @command="choseLanguage" trigger="click" :show-timeout="0" :hide-timeout="0">
                <span class="el-dropdown-link">
                  language ({{selectLanguage}})<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">中文</el-dropdown-item>
                  <el-dropdown-item command="1">English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div @mouseenter="userDetail = false" >
              <el-button type="text" style="color:#fff;" >admin</el-button>
            </div>

          </div>


        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>

    <div class="user-hover" :class="{hide : userDetail}" @mouseleave="userDetail = true">
      <el-card style="height: 100%;">
        <el-button type="text">修改密码</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>


import SystemMenu from "./component/Menu.vue";

export default {
  components: {
    SystemMenu,},
  name: 'app',
  data () {
    return {
      selectLanguage : '中文',
      userDetail : true,
    }
  },
  methods : {
    choseLanguage : function(type){
      if(type == 0){
        this.selectLanguage = "中文";
        this.$i18n.locale = "zh-cn";
      }else{
        this.selectLanguage = "English";
        this.$i18n.locale = "en";
      }

    }
  }
}
</script>

<style>
  *{padding:0;margin:0;}
  .el-menu--horizontal{border-bottom: 0;}
  .jrc-header{background-color: rgb(21, 160, 148)}
  .el-header{padding:0;}
  .menu{border-bottom: 1px solid #eeee;display: flex;flex-direction: row;justify-content:space-between;}
  .language{color: #fff;margin-right: 1rem;}
  .logo{font-size: 20px;color: aliceblue;margin-right: 3rem;margin-left: 1rem;line-height: 60px;}
  .last{display: flex;flex-direction: row;line-height: 60px;margin-right: 1rem;}
  .el-dropdown{color:#fff;cursor:pointer;}
  .user-hover{border:1px solid #eee;position: fixed;top:65px;right: 10px;width: 200px;height: 300px;}
  .hide{display: none;}
</style>
